<!--vue模板-->
<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo nav"
    default-active="2"
    text-color="#fff"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>系统管理</span>
      </template>
      <el-menu-item index="1-4-1">
        <RouterLink to="/user">用户管理</RouterLink>
      </el-menu-item>
      <el-menu-item index="1-4-2">
        <RouterLink to="/dept">部门管理</RouterLink>
      </el-menu-item>
      <el-menu-item index="1-4-3">
        <RouterLink to="/product">产品管理</RouterLink>
      </el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><location /></el-icon>
        <span>客户管理</span>
      </template>
      <el-menu-item index="2-4-1">
        <RouterLink to="/customer">公海客户</RouterLink>
      </el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>
        <el-icon><location /></el-icon>
        <span>合同管理</span>
      </template>
      <el-menu-item index="3-4-1">
        <RouterLink to="/contract/1">全部合同</RouterLink>
      </el-menu-item>
      <el-menu-item index="3-4-2">
        <RouterLink to="/contract/2">我的合同</RouterLink>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref } from "vue";
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.nav {
  width: 200px;
  height: calc(100vh - 80px);
  float: left;
}
a {
  color: #fff;
  text-decoration: none;
}
</style>
